import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, Icon, Modal, List, Button, Input, Popconfirm, Empty, notification, Popover, message } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './CardList.less';

const { Meta } = Card;
const confirm = Modal.confirm;

@connect(({ loading, competition }) => ({
  publicCompetitionList: competition.publicCompetitionList,
  unpublicCompetitionList: competition.unpublicCompetitionList,
  endCompetitionList: competition.endCompetitionList,
}))
class Manage extends PureComponent {
  state = {
    loading: true,
    visible: false,
    display: 'unpublish'
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/getPublicCompetitionList',
      payload: {
        status: 3
      },
    })
    dispatch({
      type: 'competition/getUupublicCompetitionList',
      payload: {
        status: 0
      }
    })
    dispatch({
      type: 'competition/getEndCompetitionList',
      payload: {
        status: 5
      }
    })
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/newCompetition',
      callback: (res) => {
        // console.log(res);
        dispatch({
          type: 'competition/setCurrentCompetition',
          payload: { name: res },
          callback: (result) => {
            // console.log(result);
            if (res == result) {
              this.setState({
                visible: false,
              });
              router.push(`/setting/index/messagesetting`);
            }
          }
        })
      }
    })
  }

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }

  handleClick = () => {
    this.showModal()
    // console.log(this.props)
  }

  handlePreview = (id) => {
    router.push(`/preview/competition/${id}`)
  }

  handleEdit = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/setCurrentCompetition',
      payload: { name: id },
      callback: (result) => {
        if (result) {
          router.push(`/setting/index/messagesetting`);
        }
      }
    })
  }

  onPublish = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/publishCompetition',
      payload: { competitionId: id },
      callback: (res) => {
        if (res) {
          notification['success']({
            message: '发布成功',
            description: '发布了一个新的竞赛，请在已发布竞赛中查看',
          });
        }
      }
    })
  }

  reEdit = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/reEditCompetition',
      payload: { competitionId: id },
      callback: (res) => {
        if (res) {
          notification['success']({
            message: '修改成功',
            description: '该竞赛返回编辑阶段，请在未发布竞赛中查看',
          });
        }
      }
    })
  }

  onEnd = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/endCompetition',
      payload: { id: id },
      callback: (res) => {
        if (res) {
          notification['success']({
            message: '下线成功',
            description: '该竞赛已下线，请在已结束竞赛中查看',
          });
        }
      }
    })
  }

  onDelete = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'competition/deleteCompetition',
      payload: { competitionId: id },
      callback: (res) => {
        if (res) {
          console.log(res)
          message.success('删除成功')
        };
      }
    })
  }

  onTabChange = key => {
    console.log(this.props)
    switch (key) {
      case 'publish':
        this.setState({ display: 'publish' });
        break;
      case 'unpublish':
        this.setState({ display: 'unpublish' });
        break;
      case 'end':
        this.setState({ display: 'end' });
        break;
      default:
        this.setState({ display: 'unpublish' });
        break;
    }
  }

  result = (id) => {
    router.push(`/preview/competition/${id}/result`);
  }

  render() {
    const { loading, display, visible } = this.state;
    const { publicCompetitionList, endCompetitionList, unpublicCompetitionList } = this.props;
    const operationTabList = [
      {
        key: 'unpublish',
        tab: (
          <span>
            未发布竞赛 <span style={{ fontSize: 14 }}>({unpublicCompetitionList && unpublicCompetitionList.length - 1})</span>
          </span>
        ),
      },
      {
        key: 'publish',
        tab: (
          <span>
            已发布竞赛 <span style={{ fontSize: 14 }}>({publicCompetitionList && publicCompetitionList.length})</span>
          </span>
        ),
      },
      {
        key: 'end',
        tab: (
          <span>
            已结束竞赛 <span style={{ fontSize: 14 }}>({endCompetitionList && endCompetitionList.length})</span>
          </span>
        ),
      },
    ];
    // console.log("list",list)
    return (
      <PageHeaderWrapper>
        <Row gutter={24}>
          <Col lg={24} md={24}>
            <Card
              tabList={operationTabList}
              onTabChange={this.onTabChange}
            >
              {(() => {
                switch (display) {
                  case 'unpublish': return <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 3, md: 3, sm: 2, xs: 1 }}
                    dataSource={unpublicCompetitionList}
                    pagination
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Popover content={<span>点击卡片预览竞赛内容</span>}>
                            <Card
                              bordered
                              hoverable
                              className={styles.card}
                              actions={[
                                <span>
                                  <Popconfirm title="确认编辑竞赛设置？点击确定并且进入竞赛设置界面" onConfirm={() => this.handleEdit(item.id)}>
                                    <a>编辑</a>
                                  </Popconfirm>
                                </span>,
                                <span>
                                  <Popconfirm title="确认发布竞赛？" onConfirm={() => this.onPublish(item.id)}>
                                    <a>发布</a>
                                  </Popconfirm>
                                </span>,
                                <Popconfirm title="确认删除竞赛？" onConfirm={() => this.onDelete(item.id)}>
                                  <a>删除</a>
                                </Popconfirm>
                              ]}
                              cover={item.advertisePictureVo !== null && item.advertisePictureVo.advertisePictureBig !== "http://localhost:8080/image/null" ?
                                <img onClick={() => this.handlePreview(item.id)} alt="advertise" src={item.advertisePictureVo.advertisePictureBig} /> :
                                <span>图片暂未上传</span>
                              }
                            >
                              <Card.Meta
                                onClick={() => this.handlePreview(item.id)}
                                // avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                                title={item.competitionInformationVo !== null && item.competitionInformationVo.name}
                                description={
                                  <Ellipsis tooltip className={styles.item} lines={2}>
                                    {item.competitionInformationVo !== null && item.competitionInformationVo.competitionIntroduction !== null ?
                                      <p dangerouslySetInnerHTML={{ __html: item.competitionInformationVo.competitionIntroduction }} />
                                      : <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />
                                    }
                                  </Ellipsis>
                                }
                              />
                            </Card>
                          </Popover>
                        </List.Item>
                      ) : (
                          <List.Item>
                            <Button type="dashed" className={styles.newButton} onClick={this.handleClick}>
                              <Icon type="plus" /> 新增竞赛
                          </Button>
                          </List.Item>
                        )
                    }
                  />
                  case 'publish': return <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 3, md: 3, sm: 2, xs: 1 }}
                    dataSource={publicCompetitionList}
                    pagination
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Card
                            bordered
                            hoverable
                            className={styles.card}
                            actions={[
                              <Popconfirm title="确认返回编辑竞赛？" onConfirm={() => this.reEdit(item.id)}>
                                <a>返回编辑</a>
                              </Popconfirm>,
                              <Popconfirm title="确认结束竞赛？" onConfirm={() => this.onEnd(item.id)}>
                                <a>结束</a>
                              </Popconfirm>,
                              <span onClick={() => this.result(item.id)}>查看结果</span>
                            ]}
                            cover={item.advertisePictureVo !== null && item.advertisePictureVo.advertisePictureBig !== null ?
                              <img onClick={() => this.handlePreview(item.id)} alt="example" src={item.advertisePictureVo.advertisePictureBig} /> :
                              <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />}
                          >
                            <Card.Meta
                              onClick={() => this.handlePreview(item.id)}
                              // avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                              title={item.competitionInformationVo !== null && item.competitionInformationVo.name}
                              description={
                                <Ellipsis tooltip className={styles.item} lines={2}>
                                  {item.competitionInformationVo !== null && item.competitionInformationVo.competitionIntroduction !== null ?
                                    <p dangerouslySetInnerHTML={{ __html: item.competitionInformationVo.competitionIntroduction }} />
                                    : <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />
                                  }
                                </Ellipsis>
                              }
                            />
                          </Card>
                        </List.Item>
                      ) : (
                          null
                        )
                    }
                  />
                  case 'end': return <List
                    rowKey="id"
                    grid={{ gutter: 24, lg: 3, md: 3, sm: 2, xs: 1 }}
                    dataSource={endCompetitionList}
                    pagination
                    renderItem={item =>
                      item ? (
                        <List.Item key={item.id}>
                          <Card
                            bordered
                            hoverable
                            className={styles.card}
                            cover={item.advertisePictureVo !== null && item.advertisePictureVo.advertisePictureBig !== null ?
                              <img onClick={() => this.handlePreview(item.id)} alt="example" src={item.advertisePictureVo.advertisePictureBig} /> :
                              <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />}
                          >
                            <Card.Meta
                              onClick={() => this.handlePreview(item.id)}
                              // avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                              title={item.competitionInformationVo !== null && item.competitionInformationVo.name}
                              description={
                                <Ellipsis tooltip className={styles.item} lines={2}>
                                  {item.competitionInformationVo !== null && item.competitionInformationVo.competitionIntroduction !== null ?
                                    <p dangerouslySetInnerHTML={{ __html: item.competitionInformationVo.competitionIntroduction }} />
                                    : <Empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" />
                                  }
                                </Ellipsis>
                              }
                            />
                          </Card>
                        </List.Item>
                      ) : (
                          null
                        )
                    }
                  />
                  default: break;
                }
              })()}
              <Modal
                title="新增竞赛"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
              >
                <p>确认新增竞赛？点击确定并且进入竞赛设置界面</p>
              </Modal>
            </Card>

          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default Manage;
